<template>
  <div class="module-box">
    <div style="flex: 0 1 50%">
      <dv-border-box-7 style="width: 100%; height: 400px"
        ><MapChart/></dv-border-box-7
      >
    </div>
    <div style="flex: 0 1 25%">
      <dv-border-box-8 style="width: 100%; height: 400px"
        ><dv-active-ring-chart
          :config="config"
          style="width: 100%; height: 400px"
        />
      </dv-border-box-8>
    </div>
    <div style="flex: 0 1 25%">
      <dv-border-box-2 style="width: 100%; height: 400px"
        ><LineChart /></dv-border-box-2
      >
    </div>
  </div>
</template>

<script>
import LineChart from "./LineChart.vue";
import MapChart from "./mapChart.vue";
export default {
  components: {
    LineChart,MapChart
  },
  data() {
    return {
      config: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
</style>